<template>
  <div class="width-100 height-100 overflow-auto">
    <div class="padding flex direction-column">
      <div class="search-form">
        <el-form inline>
          <year-month-picker v-model="time"></year-month-picker>
          <el-form-item label="区域">
            <el-select v-model="area">
              <el-option
                v-for="option in districts" :key="option.code"
                :label="option.name" :value="option.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="border-radius">
        <el-radio-group v-model="type">
          <el-radio-button v-for="option in typeOptions" :key="option.value" :label="option.value"
          >
            {{ option.name }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="bg-white border-radius margin-top dark-alpha-block">
        <div class="info-head">{{ typeText }}详情</div>
        <div class="info-content padding">
          <el-table
            v-loading="loading" :data="lists" height="300px"
            :header-cell-style="{
              backgroundColor: themeColor,
              color: 'white'
            }"
          >
            <el-table-column v-for="column in columns" :key="column.prop" v-bind="column"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="bg-white border-radius margin-top dark-alpha-block">
        <div class="info-head">{{ typeText }}趋势分析</div>
        <div class="info-content">
          <v-chart
            :option="chartOption" style="width:100%;height:400px;"
            :theme="chartTheme" autoresize
          ></v-chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TimePicker from '@/mixins/time-picker'
import MixinVchartTheme from '@/mixins/mixin-vchart-theme';

export default {
  name: 'energy-efficiency-analysis-warning',
  mixins: [TimePicker, MixinVchartTheme],
  data () {
    return {
      area: '',
      type: '1',
      typeOptions: [
        { name: '综合能源消费量', value: '1' },
        { name: '用电量', value: '2' },
        { name: '用气量', value: '3' },
        { name: '万元产值单耗', value: '5' },
        { name: '能源消费总量', value: '6' },
      ],
      loading: false,
      lists: [],
      columns: [
        { label: '时间', prop: 'col1' },
        { label: '实际值（万吨标准煤）', prop: 'col2' },
        { label: '正常预测值上限（万吨标准煤）', prop: 'col3' },
        { label: '正常预测值下限（万吨标准煤）', prop: 'col4' },
      ]
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    districts () {
      return this.$store.getters['user/districts']
    },
    qs () {
      return {
        time: this.time,
        area: this.area,
        type: this.type,
      }
    },
    typeText () {
      const type = this.type
      const options = this.typeOptions
      const target = options.find(v => v.value === type)
      return target ? target.name : ''
    },
    chartOption () {
      // TODO
      const months = ['2022-10', '2022-11', '2022-12', '2023-1', '2023-2', '2023-3', '2023-4']
      const lines = this.columns.slice(1).map(v => v.label)
      return {
        legend: {
          left: 'center',
          bottom: '5%'
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '24%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          data: months
        },
        yAxis: {
          type: 'value',
          name: '万吨标准煤',
        },
        series: [
          ...lines.map(v => ({
            type: 'line',
            smooth: true,
            name: v,
            data: months.map(() => Math.round(Math.random() * 99 + 1))
          }))
        ]
      }
    }
  },
  watch: {
    type () {
      this.getLists()
    }
  },
  mounted () {
    this.getLists()
  },
  methods: {
    getLists () {
      this.loading = true
      // TODO
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
          this.loading = false
          this.lists = [
            ...['2023-2', '2023-3', '2023-4'].map((v) => ({
              col1: v,
              col2: '-',
              col3: '-',
              col4: '-'
            }))
          ]
        }, 300)
      })
    },
    onSearch () {}
  }
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .info-head {
    padding: 20px $gutter 0 $gutter;
    font-size: 16px;
  }
</style>
